<!--
 * @Description: 
 * @Version: 
 * @Autor: tc
 * @Date: 2022-03-07 10:07:12
 * @LastEditors: tc
 * @LastEditTime: 2022-06-15 09:53:19
-->
<template>
    <div class="home" id="home" v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="加载中" element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
        <div class="header">
            <div class="header-page">
                <div></div>
                <div class="title">省市县一体化堤坝安全运行监测平台大数据中心</div>
                <div></div>
            </div>
        </div>
        <div class="page">
            <div class="left">
                <div class="equipment currency-mg">
                    <equipment :data="equipmentData"/>
                </div>
                <div class="echart-middle">
                    <riskLevel :data="riskLevelData" class="echart-left currency-mg"/>
                    <flyingLine class="echart-right currency-mg"/>
                </div>
                <div class="tree-bottom">
                    <treeRelationship :data="treeRelationData" class="currency-mg"/>
                </div>
            </div>
            <div class="right">
                <div class="right-middle">
                    <flyingLine02 :data="provincialData" @onState="onwState" class="right-middle-HunanEchart"/>
                    <echartCurve :data="reservoirData ? reservoirData.gnsVos[0] : reservoirData" class="echart-curve currency-mg"/>
                    <echartCurve02 :data="reservoirData ? reservoirData.gnsVos[0] : reservoirData" class="echart-curve currency-mg"/>
                </div>
                <div class="right-right">
                    <div class="right-materials01">
                        <middle05 :data="reservoirData" class="materials01-left currency-mg"/>
                        <middle06 :data="reservoirData" class="materials01-right currency-mg"/>
                    </div>
                    <div class="right-materials02">
                        <div class="materials02-left currency-mg">
                            <el-image
                            class="img-dingwei"
                            :src="require(`../../assets/img/dashboard/dpdengji${reservoirData != null ? reservoirData.grade:'1'}.png`)"
                            fit="fit"/>
                            <div class="turn">
                                <img src="@/assets/img/dashboard/zhuanzhuanzhuan.png" alt="">
                            </div>
                        </div>
                        <div class="materials02-right currency-mg">
                            <div class="video-live video01">
                                <el-image class="imgGuding"
                                :src="require('../../assets/img/dashboard/videoplay.png')"
                                fit="fill"
                                @click="onGetVideo('01')"/>
                                <el-image style="height:100%;width:100%"
                                :src="`${camergImge != null && camergImge.image1?'data:image/png;base64,'+camergImge.image1:require('../../assets/img/dashboard/video.png')}`"
                                :preview-src-list="[`${camergImge != null && camergImge.image1?['data:image/png;base64,'+camergImge.image1]:require('../../assets/img/dashboard/video.png')}`]"
                                fit="fill"/>
                            </div>
                            <div class="video-live video02">
                                <el-image class="imgGuding"
                                :src="require('../../assets/img/dashboard/videoplay.png')"
                                fit="fill"
                                @click="onGetVideo('02')"/>
                                <el-image style="height:100%;width:100%"
                                :src="`${camergImge != null && camergImge.image2?'data:image/png;base64,'+camergImge.image2:require('../../assets/img/dashboard/video.png')}`"
                                :preview-src-list="[`${camergImge != null && camergImge.image2?['data:image/png;base64,'+camergImge.image2]:require('../../assets/img/dashboard/video.png')}`]"
                                fit="fill"/>
                            </div>
                        </div>
                    </div>
                    <div class="right-materials03 currency-mg">
                        <monomerData :data="reservoirData"/>
                    </div>
                    <div class="right-materials04 currency-mg">
                        <el-image
                            style="width: 100%;height: 100%;"
                            :src="getGeologysImge != null ? `data:image/png;base64,${getGeologysImge}`: require('../../assets/img/dashboard/banner01.png')"
                            :preview-src-list="[`${getGeologysImge != null ? `data:image/png;base64,${getGeologysImge}`: require('../../assets/img/dashboard/banner01.png')}`]"
                            fit="fit"/>
                    </div>
                </div>
            </div>
        </div>
        <skVideo @onChange="onChangeVideo" :typename="typename" :videoUrl="videoUrl"  :visible="isAddShow"></skVideo>
    </div>
</template>

<script>
import { Url } from '@/api/url'
import { formatTimestamp } from '@/utils/common'
import equipment from './equipment.vue'
import riskLevel from './riskLevel.vue'
import flyingLine from './flyingLine.vue'
import flyingLine02 from './flyingLine02.vue'
import treeRelationship from './treeRelationship.vue'
import echartCurve from './echartCurve.vue'
import echartCurve02 from './echartCurve02.vue'
import middle05 from './middle05.vue'
import middle06 from './middle06.vue'
import monomerData from './monomerData.vue'
import skVideo from '@/components/skVideo.vue'
import dashboardsApi from '@/api/dashboard'
import homeApi from '@/api/home'

export default {
    name: 'largeScreen',
    components: {
        equipment,
        riskLevel,
        flyingLine,
        flyingLine02,
        treeRelationship,
        echartCurve,
        echartCurve02,
        middle05,
        middle06,
        monomerData,
        skVideo,
    },
    data() {
        return {
            Url,
            fullscreenLoading:false,
            equipmentData:null,
            riskLevelData:null,
            treeRelationData:null,
            provincialData:{},
            reservoirData:null,
            getGeologysImge:null,
            StationVideo:'',
            StationVideo02:'',
            camergImge:null,
            
            isAddShow:false,
            typename:null,
            videoUrl:null,

            newtimer:null
        }
    },
    created() {
        this.initScreenShow()
    },
    unmounted() {
    },
    mounted(){
        this.newtimer = setInterval(() => {
            this.initScreenShow()
        }, 1000*60*60);
    },
    methods: {
        initScreenShow(){
            this.fullscreenLoading = true
            Promise.all([dashboardsApi.findByEquit(), dashboardsApi.findByRisk(),dashboardsApi.findSensorCount(),dashboardsApi.findAreaCount(),dashboardsApi.findByAllStations()]).then((res) => {
                this.fullscreenLoading = false
                this.equipmentData = res[0].data
                this.riskLevelData = res[1].data
                this.treeRelationData = res[2].data
                this.provincialData = {
                    provincialData:res[3].data,
                    allreservoirData:res[4].data
                }
            }).catch((err) => {
                this.fullscreenLoading = false
                this.$message.error(err.message||'操作失败')
            })
        },
        //根据设备编码查询设备信息 
        getEquipmentCodeData(val){
            dashboardsApi.findByIdEq({stationId:val.stationId}).then(res => {
                    this.getGeologyImge(res.data)
                    this.reservoirData = res.data
                }).catch(err=>{
                    this.$message.error(err.message||'操作失败')
                })
        },
         //地质图片
        getGeologyImge(ress){
            let dqData = ress
            if(dqData.geologyEntityList.length > 0){
                homeApi.getGeologyImge({
                    ddatetime:formatTimestamp(new Date()),
                    sensorCode:dqData.geologyEntityList[0].sensorCode,
                    stationId:dqData.stationId
                }).then(res => {
                    dqData.getGeologysImge = res.data
                }).catch(err=>{
                })
            }
        },
        //获取视频地址
        getvideo(val,item){
            dashboardsApi.getvideo({
                cameraCode:val,
                stationId:item.stationId
            }).then(res => {
                if(val == '01'){
                    this.StationVideo = res.data
                }else if(val == '02'){
                    this.StationVideo02 = res.data
                }
            }).catch(err=>{
                this.$message.error(err.message||'操作失败')
            })
        },
        onChangeVideo(data){
            this.isAddShow = data.bool
        },
        //查看视频
        onGetVideo(val){
            if(val == '01'){
                this.videoUrl = this.StationVideo
            }else if (val == '02'){
                this.videoUrl = this.StationVideo02
            }
            this.typename = val
            this.isAddShow = true
        },
        //查看视频图片
        getfindByCamerg(val){
            dashboardsApi.findByCamerg({
                stationId:val.stationId
            }).then(res => {
                this.camergImge = res.data
            }).catch(err=>{
                this.$message.error(err.message||'操作失败')
            })
        },
        //地图返回值
        onwState(item){
            this.getEquipmentCodeData(item)
            this.getfindByCamerg(item)
            this.getvideo('01',item)
            this.getvideo('02',item)
        }
    },
    beforeUnmount(){
        clearInterval(this.newtimer)
    }
}
</script>

<style lang="scss" scoped>
.home {
    width: 3328px;
    height: 1872px;
    overflow: hidden;
    background: url("../../assets/img/dashboard/bg03.png");
    .header {
        width: 100%;
        height: 180px;
        .header-page {
            height: 140px;
            color: white;
            display: flex;
            justify-content: space-between;
            > div {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .title {
                font-size: 55px;
                font-family: FZHZ;
                letter-spacing:10px;
                color: #DADADA;
                background: linear-gradient(0deg, #00A8FF 0%, #38F8FF 100%);
                -webkit-text-fill-color: transparent;
                -webkit-background-clip: text;
            }
            .word {
                background-image: linear-gradient(180deg, white, #00ffff);
                background-clip: text;
                color: transparent;
            }
            .topweather {
                display: flex;
                align-items: center;
                img {
                    margin: 0 10px;
                }
            }
        }
    }
    .page {
        width: 100%;
        height: calc(100% - 180px);
        padding: 0 30px 30px 30px;
        box-sizing: border-box;
        display: flex;
        .left >div {
            box-sizing: border-box;
            margin-bottom: 30px;
        }
        .left {
            width: 940px;
            height: 100%;
            margin-right: 30px;
            .equipment {
                height: 270px;
            }
            .echart-middle {
                display: flex;
                height: 560px;
                .echart-left {
                    width: 390px;
                    margin-right: 30px;
                }
                .echart-right {
                    width: 520px;
                }
            }
            .tree-bottom {
                height: 770px;
            }
        }
        .right {
            width: 2299px;
            height: 100%;
            display: flex;
            .right-middle {
                width: 1333px;
                margin-right: 26px;
                .right-middle-HunanEchart {
                    height: 860px;
                    margin-bottom: 30px;
                }
                .echart-curve {
                    height: 380px;
                    margin-bottom: 20px;
                }
            }
            .right-right {
                width: 940px;
                >div {
                    margin-bottom: 30px;
                }
                .right-materials01 {
                    display: flex;
                    height: 440px;
                    .materials01-left {
                        width: 388px;
                        margin-right: 30px;
                    }
                    .materials01-right {
                        width: 570px;
                    }
                }
                .right-materials02 {
                    display: flex;
                    height: 390px;
                    .materials02-left {
                        width: 356px;
                        margin-right: 30px;
                        box-sizing: border-box;
                        position: relative;
                        .img-dingwei {
                            position: absolute; 
                            left: 50%; 
                            top: 57%;
                            width: 190px;
                            transform: translate(-50%, -50%);
                        }
                        .turn{
                            position: absolute;
                            left: 24px;
                            top: 114px;
                            width: 260px;
                            height: 260px;
                            animation:turn 12s linear infinite;
                            >img {
                                height: 100%;
                                width: 100%;
                            }     
                        }
                        @keyframes turn{
                            0%{-webkit-transform:rotate(0deg);}
                            25%{-webkit-transform:rotate(90deg);}
                            50%{-webkit-transform:rotate(180deg);}
                            75%{-webkit-transform:rotate(270deg);}
                            100%{-webkit-transform:rotate(360deg);}
                        }
                    }
                    .materials02-right {
                        position: relative;
                        width: 660px;
                        .video01{
                            top: 180px;
                            left: 27px;
                        }
                        .video02{
                            top: 180px;
                            left: 316px;
                        }
                        .video-live {
                            position: absolute;
                            width: 240px;
                            height: 135px;
                            .imgGuding {
                                position: absolute;
                                z-index: 2;
                                bottom: 10%;
                                right: 10%;
                            }
                        }
                    }
                }
                .right-materials03 {
                    height: 220px;
                    box-sizing: border-box;
                    margin-bottom: 20px;
                }
                .right-materials04 {
                    height: 530px;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
    }
}
// 通用样式
.currency-mg {
    padding: 80px 15px 20px;
}
</style>